<template>
  <div class="search-item">
    <!-- 搜索标题 -->
    <div class="search-item__title">全部结构 > “手机”</div>
    <!-- 品牌 -->
    <div class="row search-item__row" :class="{zd: brand_iszd}">
      <div class="col-1 search-item__label">品牌:</div>
      <div class="col-1"></div>
      <div class="col-10">
        <!-- 搜索索引字母 -->
        <div class="search-item__alpha">
          <span @mouseover="searchLetter = ''" class="search-item__alpha-item is-selected">所有品牌</span>
          <span @mouseover="onBrandMouseOver(item)" class="search-item__alpha-item" v-for="(item, index) in alpha" :key="index">{{item}}</span>
        </div>
        <!-- 品牌列表 -->
        <ul
          :style="{paddingTop: brand_iszd ? '3px' : '5px'}"
          ref="search-item__brand-ul"
          class="search-item__brand-ul"
        >
          <li
            @click="onBrandClick(item)"
            :class="{'is-selected': item.isSelected}"
            class="search-item__brand-li"
            v-for="(item, index) in mybrands"
            :key="index"
          >
            <img :src="item.image" alt />
          </li>
        </ul>
        <!-- 选中的数组 选中 取消 -->
        <div v-if="isBrandMultiCheck" class="search-item__brand-selected">
          已选条件:
          <span
            @click="removeBrandSelected(item, index)"
            v-for="(item, index) in brandSelected"
            :key="index"
            class="search-item__brand-item-selected"
          >{{item.title}}</span>
          <div style="text-align: center">
            <button :disabled="brandSelected.length == 0">确定</button>
            <button @click="cancelBrandMultiCheck">取消</button>
          </div>
        </div>
      </div>
      <div class="col-1">
        <template v-if="!isBrandMultiCheck">
          <span @click="zd">{{brand_iszd? "更多": "收起"}}</span>
          <span @click="dx">多选</span>
        </template>
      </div>
    </div>
    <!-- 分类 -->
    <div class="row search-item__row">
      <div class="col-1 search-item__label">分类:</div>
      <div class="col-1"></div>
      <div class="col-11">
        <a href>30英寸以下</a>
        <a href>30英寸以下</a>
        <a href>30英寸以下</a>
        <a href>30英寸以下</a>
        <a href>30英寸以下</a>
      </div>
    </div>
    <!-- 分类 -->
    <div class="row search-item__row">
      <div class="col-1 search-item__label">屏幕尺寸:</div>
      <div class="col-1"></div>
      <div class="col-11">
        <a href>30英寸以下</a>
        <a href>30英寸以下</a>
        <a href>30英寸以下</a>
        <a href>30英寸以下</a>
        <a href>30英寸以下</a>
      </div>
    </div>
    <!-- 高级选项 -->
    <div class="row search-item__row">
      <div class="col-1 search-item__label">高级选项:</div>
      <div class="col-1"></div>
      <div class="col-11">
        <!-- 多个选项按钮 -->
        <div v-for="(item, index) in 10" :key="index" class="search-item__advanced-item">
          <div class="search-item__advanced-title">CPU型号</div>
          <div class="search-item__advanced-content">
            麒麟990
            麒麟980
            麒麟970
            麒麟810
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      searchLetter: "", // 将要搜索的字母
      brand_iszd: true, // 品牌是否折叠
      isBrandMultiCheck: false, // 是否开启多选
      brandSelected: [], // 多选时 被选中的数组
      alpha: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      ]
    };
  },
  watch: {
    // 监听当前品牌是否折叠
    // 参数一、修改之后的值
    // 参数二、修改之前的值
    brand_iszd: function(newValue, oldValue) {
      // 当折叠时
      if (newValue) {
        // 滚动到顶部
        this.$refs["search-item__brand-ul"].scrollTop = 0;
      }
    }
  },
  computed: {
    // 计算过滤过的品牌数组
    mybrands: function() {
      // 没有搜索字母时
      if (this.searchLetter == '') {
        return this.data.brands
      } else {
        // 有搜索字母时就过滤当前品牌里字段的首字母
        return this.data.brands.filter(v => v.first_letter == this.searchLetter)
      }
    }
  },
  methods: {
    // 把要搜索的字母保存在变量上
    onBrandMouseOver(letter) {
      this.searchLetter = letter
      console.log(this.searchLetter)
    },
    // 展示更多品牌
    zd() {
      this.brand_iszd = !this.brand_iszd;
    },
    // 点击多选按钮
    dx() {
      // 开启多选按钮时
      this.isBrandMultiCheck = true;
      // 品牌展开
      this.brand_iszd = false;
    },
    // 点击品牌时
    onBrandClick(brand) {
      // 只有在开启多选功能时才执行
      if (this.isBrandMultiCheck) {
        // 先查找这个品牌在被选中的数组中的下标
        let i = this.brandSelected.findIndex(v => v.id === brand.id);
        // console.log(i)
        // 如果不存在 就添加进去
        if (i == -1) {
          this.brandSelected.push(brand);
          // 同时标记一下这个品牌已经被选中 给数据添加一个属性
          brand.isSelected = true;
        } else {
          // 把已经存在的这个品牌从这个数组删除
          this.brandSelected.splice(i, 1);
          // 把这个已经选中的标记去掉
          brand.isSelected = false;
        }
      }
    },
    // 点击删除已选的品牌
    removeBrandSelected(brand, index) {
      // 从选中数组中删除
      this.brandSelected.splice(index, 1);
      // 把这个已经选中的标记去掉
      brand.isSelected = false;
    },
    // 点击取消品牌多选功能
    cancelBrandMultiCheck() {
      //  关闭多选功能
      this.isBrandMultiCheck = false;
      // 开启折叠
      this.brand_iszd = true;
      // 清空选中品牌数组
      this.brandSelected = [];
      // 清空所有品牌的选中状态
      this.data.brands.forEach(v => (v.isSelected = false));
    }
  }
};
</script>

<style lang="scss">
@import "./styles/testSearch.scss";
</style>